<script setup lang="ts">
import GlobalHeader from './components/GlobalHeader.vue';
import Footer from '@/components/Footer.vue';
import Loader from '@/components/Loader.vue';
import { useStore } from 'vuex';
import { computed, watch } from 'vue';
import { GlobalDataProps } from '@/types';
import createMessage from '@/components/createMessage';

const store = useStore<GlobalDataProps>();
const currentUser = computed(() => store.state.user);
const isLoading = computed(() => store.state.loading);
const error = computed(() => store.state.error);

watch(() => error.value.status, () => {
  const { status, message } = error.value;
  if (status && message) {
    createMessage(message, 'error');
  }
})
</script>

<template>
  <div class="container">
    <global-header :user="currentUser"></global-header>
    <!-- <Message type="error" :message="error.message" v-if="error.status"></Message> -->
    <Loader text="玩命加载中...🤭" background="rgba(255,255,255,0.8)" v-if="isLoading" />
    <router-view></router-view>
    <Footer></Footer>
  </div>
</template>

<style>

</style>
